<template>
  <div class="page">
    <div class="page__top">
      <RouterLink to="/films/one">正在热映</RouterLink>
      <RouterLink to="/films/two">即将上映</RouterLink>
    </div>
    <div class="page__body">
      <!-- 用于渲染子路由 One Two -->
      <RouterView />
    </div>
  </div>
</template>

<style>
.page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: green;
}

.page__top {
  display: flex;
  align-items: center;
  height: 50px;
  background-color: pink;
}

.page__top a {
  height: 30px;
  flex: 1;
}

.page__body {
  flex: 1;
}
</style>
